<template>
<div>
    <button @click="chooseAll">全选</button>
    <button @click="chooseNone">全不选</button>
    选中{{selectNum}}/{{ todoList.length }}
</div>
  
</template>

<script lang="ts">
import { defineComponent ,reactive,ref, watch} from "vue";
export default defineComponent({
    name:'Footer',
    props: {
        todoList: {
            type: Array,
            required: true
        },
        chooseNone: {
            type: Function,
            required: true
        },
        chooseAll: {
            type: Function,
            required: true
        }
    },
    setup(props) {
        let selectNum = ref(0)
    
        watch(props.todoList, ()=> {
            selectNum.value = props.todoList.reduce((sum:number = 0,currentItem:any) => {
                if(currentItem.isSelect) {
                    return sum +1
                }else {
                    return sum
                }
            },0)
        }, {
            immediate: true,
            deep: true
        })

        const chooseNone = () => {
            props.chooseNone()
        }
        const chooseAll = () => {
            props.chooseAll()
        }
        return {
            selectNum,
            chooseNone,
            chooseAll
        }
    }

})
</script>

<style scoped>

</style>